<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/aaccount.css">
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>账户设置</title>
</head>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
            <svg t="1711978012908" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="7058" width="30" height="30">
                <path
                        d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
                        fill="#707070" p-id="7059"></path>
            </svg>
        </el-menu-item>
        <el-menu-item index="2">
            <svg t="1711977776835" class="icon" viewBox="0 0 1029 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="6084" width="30" height="30">
                <path
                        d="M1001.423238 494.592q21.504 20.48 22.528 45.056t-16.384 40.96q-19.456 17.408-45.056 16.384t-40.96-14.336q-5.12-4.096-31.232-28.672t-62.464-58.88-77.824-73.728-78.336-74.24-63.488-60.416-33.792-31.744q-32.768-29.696-64.512-28.672t-62.464 28.672q-10.24 9.216-38.4 35.328t-65.024 60.928-77.824 72.704-75.776 70.656-59.904 55.808-30.208 27.136q-15.36 12.288-40.96 13.312t-44.032-15.36q-20.48-18.432-19.456-44.544t17.408-41.472q6.144-6.144 37.888-35.84t75.776-70.656 94.72-88.064 94.208-88.064 74.752-70.144 36.352-34.304q38.912-37.888 83.968-38.4t76.8 30.208q6.144 5.12 25.6 24.064t47.616 46.08 62.976 60.928 70.656 68.096 70.144 68.096 62.976 60.928 48.128 46.592zM447.439238 346.112q25.6-23.552 61.44-25.088t64.512 25.088q3.072 3.072 18.432 17.408l38.912 35.84q22.528 21.504 50.688 48.128t57.856 53.248q68.608 63.488 153.6 142.336l0 194.56q0 22.528-16.896 39.936t-45.568 18.432l-193.536 0 0-158.72q0-33.792-31.744-33.792l-195.584 0q-17.408 0-24.064 10.24t-6.656 23.552q0 6.144-0.512 31.232t-0.512 53.76l0 73.728-187.392 0q-29.696 0-47.104-13.312t-17.408-37.888l0-203.776q83.968-76.8 152.576-139.264 28.672-26.624 57.344-52.736t52.224-47.616 39.424-36.352 19.968-18.944z"
                        p-id="6085"></path>
            </svg>
        </el-menu-item>
        <el-menu-item index="3">
            <svg t="1711977480501" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="4255" width="30" height="30">
                <path
                        d="M853.333333 768.064A426.112 426.112 0 0 1 512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667a21.333333 21.333333 0 0 1-42.666667 0c0-212.074667-171.925333-384-384-384S128 299.925333 128 512s171.925333 384 384 384a383.573333 383.573333 0 0 0 319.36-170.666667h-84.757333A21.248 21.248 0 0 1 725.333333 704c0-11.776 9.664-21.333333 21.269334-21.333333h128.128c5.866667 0 11.178667 2.346667 15.018666 6.186666l0.021334 0.106667c3.84 3.882667 6.229333 9.173333 6.229333 14.976v128.128c0 11.733333-9.472 21.269333-21.333333 21.269333-11.776 0-21.333333-9.664-21.333334-21.269333v-64z"
                        fill="#3D3D3D" p-id="4256"></path>
            </svg>
        </el-menu-item>
    </el-menu>
    <div style="height: 40px;"></div>
    <el-row>
        <el-col :span="12" style="height: 100vh;">
            <el-form ref="form" :model="admin" label-width="80px">
                <el-form-item label="管理员用户名">
                    <el-input :disabled="isDisabled" v-model="admin.username"></el-input>
                </el-form-item>
                <el-form-item label="管理员密码">
                    <el-input :disabled="isDisabled" v-model="admin.password"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input :disabled="isDisabled" v-model="admin.nickname"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload :disabled="isDisabled" ref="upload" action="" list-type="picture-card"
                               :on-preview="handlePictureCardPreview3" :on-remove="handleRemove3"
                               :on-change="UploadImageToCertificate3" :limit="1" :file-list="fileList3"
                               :auto-upload="false">
                        <i class="el-icon-plus"></i>
                        <template #tip>
                            <div style="font-size: 12px;color: #919191;">
                                单次限制上传一张图片
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item v-if="isDisabled">
                    <el-button type="primary" @click="enableEditing">点击修改</el-button>
                </el-form-item>
                <el-form-item v-else>
                    <el-button @click="enableEditing">取消</el-button>
                    <el-button type="primary" @click="updateAdmin">提交修改</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="12" style="height: 100vh; padding: 150px 250px;">
            <el-button type="danger" round @click="showAddDialog()">添加管理员</el-button>
        </el-col>
    </el-row>
    <el-dialog title="添加管理员" :visible.sync="addDialogVisible" width="80%" :before-close="closeAddDialog">
        <el-form ref="form" :model="addAdminData" label-width="100px">
            <el-form-item label="登录名">
                <el-input v-model="addAdminData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="addAdminData.password"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="addAdminData.nickname"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload ref="upload" action="" list-type="picture-card"
                           :on-preview="handlePictureCardPreview2" :on-remove="handleRemove2"
                           :on-change="UploadImageToCertificate2" :limit="1" :file-list="fileList2"
                           :auto-upload="false">
                    <i class="el-icon-plus"></i>
                    <template #tip>
                        <div style="font-size: 12px;color: #919191;">
                            单次限制上传一张图片
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button @click="addAdmin()">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                token: null,
                isDisabled: true,
                admin: {
                    id: null,
                    username: null,
                    password: null,
                    headPortrait: null,
                    nickname: null,
                },
                addAdminData: {
                    id: null,
                    username: null,
                    password: null,
                    headPortrait: null,
                    nickname: null,
                },
                addDialogVisible: false,
                fileList1: [],
                fileList2: [],
                fileList3: [],
            }
        },
        mounted() {
            this.recordToken();
        },
        methods: {
            //获取token
            recordToken() {
                this.token = localStorage.getItem('token');
                this.getAdminById();
            },

            //新增同事弹出层
            showAddDialog() {
                this.addDialogVisible = true;
            },

            //关闭新增同事弹出层
            closeAddDialog() {
                this.addDialogVisible = false;
            },

            //预览图片功能
            handlePictureCardPreview1(file) {
                console.log(file.url);
            },

            //预览图片功能
            handlePictureCardPreview2(file) {
                console.log(file.url);
            },

            //预览图片功能
            handlePictureCardPreview3(file) {
                console.log(file.url);
            },

            //移除图片功能
            handleRemove1(file, fileList) {
                console.log(file, fileList)
            },

            //移除图片功能
            handleRemove2(file, fileList) {
                console.log(file, fileList)
            },

            //移除图片功能
            handleRemove3(file, fileList) {
                console.log(file, fileList)
            },

            //上传同事头像
            UploadImageToCertificate1(file, filelist) {
                let fd = new FormData()
                fd.append('file', file.raw) //传给后台接收的名字 file
                axios.post('http://localhost:8080/common/upload', fd, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'token': this.token
                    }
                }).then(response => {
                    //上传成功后返回的数据,
                    console.log(response.data.data);
                    // 将图片地址给到表单.
                    this.addAdminData.headPortrait = response.data.data
                    this.$message({
                        message: '图片1上传成功：' + this.addAdminData.headPortrait,
                        type: 'success'
                    });
                })
            },

            //上传同事头像
            UploadImageToCertificate2(file, filelist) {
                let fd = new FormData()
                fd.append('file', file.raw) //传给后台接收的名字 file
                axios.post('http://localhost:8080/common/upload', fd, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'token': this.token
                    }
                }).then(response => {
                    //上传成功后返回的数据,
                    console.log(response.data.data);
                    // 将图片地址给到表单.
                    this.addAdminData.headPortrait = response.data.data
                    this.$message({
                        message: '图片1上传成功：' + this.addAdminData.headPortrait,
                        type: 'success'
                    });
                })
            },

            //上传同事头像
            UploadImageToCertificate3(file, filelist) {
                let fd = new FormData()
                fd.append('file', file.raw) //传给后台接收的名字 file
                axios.post('http://localhost:8080/common/upload', fd, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'token': this.token
                    }
                }).then(response => {
                    //上传成功后返回的数据,
                    console.log(response.data.data);
                    // 将图片地址给到表单.
                    this.admin.headPortrait = response.data.data
                    this.$message({
                        message: '图片上传成功：' + this.admin.headPortrait,
                        type: 'success'
                    });
                })
            },

            //新增同事
            addAdmin() {
                try {
                    axios.post('http://localhost:8080/account/addAdmin', this.addAdminData, {
                        headers: {
                            'token': this.token
                        },
                    }).then(response => {
                        this.$message({
                            showClose: true,
                            message: "添加管理员成功！",
                            type: 'success'
                        });
                        // 刷新当前页面
                        location.reload();
                    });
                } catch (error) {
                    console.error('添加失败：', error);
                }
            },

            //导航栏跳转方法
            handleSelect(index) {
                switch (index) {
                    case '1':
                        // 返回上一级
                        history.back();
                        break;
                    case '2':
                        // 返回主页面
                        window.location.href = "./admin_home.html";
                        break;
                    case '3':
                        // 刷新页面
                        location.reload();
                        break;
                    default:
                        break;
                }
            },

            //编辑表单
            enableEditing() {
                this.isDisabled = !this.isDisabled;
            },

            //获取admin信息
            getAdminById() {
                axios.get("http://localhost:8080/account/admin", {
                    headers: {
                        'token': this.token
                    },
                }).then(response => {
                    this.admin = response.data.data;
                })
                    .catch(error => {
                        console.error('获取admin信息失败', error);
                    });
            },

            //修改admin信息
            updateAdmin() {
                axios.put('http://localhost:8080/account/admin', this.admin, {
                    headers: {
                        'token': this.token
                    },
                })
                    .then(response => {
                        this.$message({
                            showClose: true,
                            message: "修改成功！",
                            type: 'success'
                        });
                    })
                    .catch(error => {
                        // 请求失败处理逻辑
                        console.error('修改失败', error);
                    });
            },
        }
    })
</script>
</html>